<template>
  <el-select v-model="data.stockId" placeholder="股票名称" filterable style="float: left; margin-right: 20px;">
    <el-option
        v-for="item in data.stockNameList"
        :key="item.stockId"
        :label="item.stockName"
        :value="item.stockId"
    />
  </el-select>

  <el-date-picker
      v-model="data.selectTime"
      type="daterange"
      format="YYYY/MM/DD"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      style="float: left; margin-right: 20px;"
  />

  <el-button type="primary" @click="drawBasicInfo(1)">图示基本数据</el-button>
  <el-button type="primary" @click="drawAverageInfo(1)">图示均线数据</el-button>
  <el-button type="primary" @click="drawBasicInfo(2)">表格显示基本数据</el-button>
  <el-button type="primary" @click="drawAverageInfo(3)">表格显示均线数据</el-button>

  <el-row style="margin-top: 20px">
    <el-select v-model="data.dayCounts" placeholder="统计天数" filterable style="">
      <el-option label="10" value="10"/>
      <el-option label="20" value="20"/>
      <el-option label="30" value="30"/>
      <el-option label="50" value="50"/>
      <el-option label="60" value="60"/>
      <el-option label="1200" value="120"/>
    </el-select>
    <el-select v-model="data.preDay" placeholder="对比天数" filterable style="margin-left: 20px">
      <el-option label="3" value="3"/>
      <el-option label="5" value="5"/>
      <el-option label="7" value="7"/>
    </el-select>
    <el-button type="primary" @click="energyStatePredict(4)" style="margin-left: 20px">均线能量分析</el-button>
  </el-row>

  <div id="chart" class="single-chart" v-if="data.showMode === 1"></div>
  <div id="chart" class="single-chart" v-if="data.showMode === 4"></div>

  <el-table id="img-container" :data="data.stockDataList" border
            style="width: calc(100% - 20px); margin-top: 20px;" v-if="data.showMode === 2"
            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
    <el-table-column prop="stockDate" label="日期"/>
    <el-table-column prop="startPrice" label="开盘价"/>
    <el-table-column prop="lowPrice" label="最低价"/>
    <el-table-column prop="highPrice" label="最高价"/>
    <el-table-column prop="endPrice" label="收盘价"/>
  </el-table>

  <el-table id="img-container" :data="data.averageDataList" border
            style="width: calc(100% - 20px); margin-top: 20px;" v-if="data.showMode === 3"
            :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
    <el-table-column prop="stockDate" label="日期"/>
    <el-table-column prop="m5" label="MA5"/>
    <el-table-column prop="m10" label="MA10"/>
    <el-table-column prop="m20" label="MA20"/>
    <el-table-column prop="m30" label="MA30"/>
    <el-table-column prop="m60" label="MA60"/>
    <el-table-column prop="m120" label="MA120"/>
    <el-table-column prop="m250" label="MA250"/>
  </el-table>
</template>

<script>
import {onBeforeMount, reactive} from "vue";
import {drawPieChart, fillData, formatTime, getRequest, message, postRequest} from "@/utils/api";

export default {
  name: "Analyse",
  setup() {
    const data = reactive({
      stockId: "",
      stockNameList: [],
      selectTime: [],
      stockDataList: [],
      averageDataList: [],
      showMode: 1,
      dayCounts: "",
      preDay: "",
    });
    onBeforeMount(() => {
      getRequest("/stockMinuteName/listAll").then((res) => {
        if (res.data.code === 200) {
          data.stockNameList = res.data.data;
        } else if (res.data.code === 500) {
          message(res.data.msg, "error");
        }
      });
      document.title = "影响力分析";
    });

    function drawBasicInfo(showMode) {
      if (data.stockId === "") {
        message("请先选择预测股票", "info");
        return;
      }
      if (data.selectTime === []) {
        message("请先选择预测日期", "info");
        return;
      }
      if (formatTime(data.selectTime[1]) > formatTime(new Date())) {
        message("日期超出范围", "info");
        return;
      }
      data.showMode = showMode;
      let stockName = "";
      data.stockNameList.forEach(item => {
        if (item["stockId"] === data.stockId) {
          stockName = item["stockName"];
        }
      });
      postRequest("/stockMinuteData/getBasicData", {
        stockId: data.stockId,
        startDate: formatTime(data.selectTime[0]),
        endDate: formatTime(data.selectTime[1])
      }).then((res) => {
        if (res.data.code === 200) {
          data.stockDataList = res.data.data;
          const xData = [];
          const yData = [];
          const nameList = ["startPrice", "highPrice", "lowPrice", "endPrice"];
          for (let i = 0; i < nameList.length; i++) {
            yData.push({
              name: nameList[i],
              data: []
            })
          }
          data.stockDataList.forEach(item => {
            xData.push(item["stockDate"]);
            yData[0].data.push(item["startPrice"]);
            yData[1].data.push(item["highPrice"]);
            yData[2].data.push(item["lowPrice"]);
            yData[3].data.push(item["endPrice"]);
          });
          fillData(stockName + "股票基本数据情况", xData, yData, nameList);
        } else if (res.data.code === 500) {
          message(res.data.msg, "error");
        }
      });
    }

    function drawAverageInfo(showMode) {
      if (data.stockId === "") {
        message("请先选择预测股票", "info");
        return;
      }
      if (data.selectTime === []) {
        message("请先选择预测日期", "info");
        return;
      }
      data.showMode = showMode;

      let stockName = "";
      data.stockNameList.forEach(item => {
        if (item["stockId"] === data.stockId) {
          stockName = item["stockName"];
        }
      });
      postRequest("/stockMinuteData/getAverageData", {
        stockName: stockName,
        startDate: formatTime(data.selectTime[0]),
        endDate: formatTime(data.selectTime[1])
      }).then((res) => {
        if (res.data.code === 200) {
          data.averageDataList = res.data.data;
          const xData = [];
          const yData = [];
          const nameList = ["MA5", "MA10", "MA20", "MA30", "MA60", "MA120", "MA250"];
          for (let i = 0; i < nameList.length; i++) {
            yData.push({
              name: nameList[i],
              data: []
            })
          }
          data.averageDataList.forEach(item => {
            xData.push(item["stockDate"]);
            yData[0].data.push(item["m5"]);
            yData[1].data.push(item["m10"]);
            yData[2].data.push(item["m20"]);
            yData[3].data.push(item["m30"]);
            yData[4].data.push(item["m60"]);
            yData[5].data.push(item["m120"]);
            yData[6].data.push(item["m250"]);
          });
          fillData(stockName + "股票均线数据情况", xData, yData, nameList);
        } else if (res.data.code === 500) {
          message(res.data.msg, "error");
        }
      });
    }

    function energyStatePredict(showMode) {
      if (data.stockId === "") {
        message("请先选择预测股票", "info");
        return;
      }
      if (data.dayCounts === "") {
        message("请先选择统计天数", "info");
        return;
      }
      if (data.preDay === "") {
        message("请先选择对比天数", "info");
        return;
      }
      data.showMode = showMode;
      let stockName = "";
      data.stockNameList.forEach(item => {
        if (item["stockId"] === data.stockId) {
          stockName = item["stockName"];
        }
      });
      postRequest("/stockMinuteData/energyStatePredict", {
        stockName: stockName,
        dayCounts: data.dayCounts,
        preDay: data.preDay
      }).then((res) => {
        if (res.data.code === 200) {
          const resData = [];
          for (let l = 0; l < 2; l++) {
            for (let m = 0; m < 3; m++) {
              resData.push(res.data.data["dataListForES"][l][m]);
            }
          }
          for (let l = 0; l < 2; l++) {
            for (let m = 0; m < 3; m++) {
              resData.push(res.data.data["dataListForEM"][l][m]);
            }
          }
          const seriesData = [];
          const nameList = ["短期均线状态互逆天数", "短期均线状态互逆上涨天数", "短期均线状态互逆下跌天数",
            "短期均线状态相同天数", "短期均线状态相同上涨天数", "短期均线状态相同下跌天数",
            "中期均线状态互逆天数", "中期均线状态互逆上涨天数", "中期均线状态互逆下跌天数",
            "中期均线状态相同天数", "中期均线状态相同上涨天数", "中期均线状态相同下跌天数",];
          for (let i = 0; i < nameList.length; i++) {
            seriesData.push({
              name: nameList[i],
              value: resData[i]
            });
          }
          drawPieChart("chart", stockName + "均线分析情况", seriesData);
        } else if (res.data.code === 500) {
          message(res.data.msg, "error");
        }
      });
    }

    return {
      data,
      drawBasicInfo,
      drawAverageInfo,
      energyStatePredict,
    };
  },
};
</script>

<style scoped>
.single-chart {
  height: calc(100vh - 200px);
  min-height: 400px;
  margin-top: 20px;
}
</style>